<template>
  <SearchModer />
  <header class="sticky top-0 z-100">
    <nav
      class="navbg border-gray-200 border-b dark:bg-gray-900"
    >
      <div
        class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-3"
      >
        <a href="/" class="flex items-center">
          <img src="@/assets/blog.png" class="h-8 mr-3" alt="Flowbite Logo" />

          <span
            class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
            >{{ $store.state.setting.blogName }}</span
          >
        </a>

        <div class="flex items-center md:order-2">
          <div class="flex mr-2">
            <div class="relative hidden md:block mt-4 mr-4">
              <div class="items-center hidden w-full md:flex">
                <ul
                  class="flex flex-col p-3 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg md:flex-row md:space-x-8 md:mt-0 md:border-0  dark:border-gray-700 cursor-pointer"
                >
                  <li>
                    <a
                      @click="$router.push('/')"
                      :class="[currPath == '/' ? 'selectnavmenu' : 'navmenu']"
                      class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                      aria-current="page"
                    >
                      <i class="iconfont icon-home_24"></i>
                      首页
                    </a>
                  </li>
                  <li>
                    <a
                      @click="$router.push('/category')"
                      :class="[
                        currPath == '/category' ? 'selectnavmenu' : 'navmenu',
                      ]"
                      class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                    >
                      <i class="iconfont icon-folder_24"></i>
                      分类
                    </a>
                  </li>
                  <li>
                    <a
                      @click="$router.push('/tag')"
                      :class="[
                        currPath == '/tag' ? 'selectnavmenu' : 'navmenu',
                      ]"
                      class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                    >
                      <i class="iconfont icon-mark_24"></i>
                      标签
                    </a>
                  </li>

                  <li>
                    <a
                      @click="$router.push('/archive')"
                      :class="[
                        currPath == '/archive' ? 'selectnavmenu' : 'navmenu',
                      ]"
                      class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                    >
                      <i class="iconfont icon-files_24"></i>
                      归档
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            <div
              class="inline-flex items-center p-2 w-10 h-10 mx-4 justify-center text-sm rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 cursor-pointer"
              @click="$store.state.isModer = true"
            >
              <i
                class="iconfont icon-search_24 font-bold"
                style="font-size: 20px; margin-top: 4px"
              >
              </i
              ><span
                class="mt-1 ml-2 font-normal text-gray-400 hover:text-gray-700 dark:hover:text-white"
                >Search</span
              >
            </div>

            <div
              class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:focus:ring-gray-600 cursor-pointer"
            >
              <div v-show="isDark" @click="toggleDark">
                <svg
                  t="1694655116700"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="16590"
                  width="26"
                  height="26"
                >
                  <path
                    d="M550.4 842.5984V998.4h-76.8v-155.8016a336.3328 336.3328 0 0 0 76.8 0z m222.5152-123.9808l110.1824 110.1568-54.3232 54.3232-110.1568-110.1824a334.7968 334.7968 0 0 0 54.272-54.272z m-521.8304 0a334.7968 334.7968 0 0 0 54.272 54.272l-110.1312 110.208-54.3232-54.3232 110.1824-110.1568zM512 256c141.3888 0 256 114.6112 256 256s-114.6112 256-256 256-256-114.6112-256-256 114.6112-256 256-256z m486.4 217.6v76.8h-155.8016a336.3328 336.3328 0 0 0 0-76.8H998.4z m-816.9984 0a336.3328 336.3328 0 0 0 0 76.8H25.6v-76.8h155.8016z m13.824-332.6976l110.1568 110.1824a334.7968 334.7968 0 0 0-54.272 54.272L140.8768 195.2512l54.3232-54.3232z m633.5488 0l54.3232 54.3232-110.1824 110.1568a334.7968 334.7968 0 0 0-54.272-54.272l110.1312-110.208zM550.4 25.6v155.8016a336.3328 336.3328 0 0 0-76.8 0V25.6h76.8z"
                    p-id="16591"
                    fill="#e6e6e6"
                  ></path>
                </svg>
              </div>
              <div v-show="!isDark" @click="toggleDark">
                <svg
                  t="1691936200821"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12850"
                  width="26"
                  height="26"
                >
                  <path
                    d="M618.496 111.616c9.216 34.304 14.336 70.656 14.336 108.032 0 228.352-184.832 413.184-413.184 413.184-37.376 0-73.728-5.12-108.544-14.336 47.616 175.616 207.872 305.152 398.848 305.152 228.352 0 413.184-184.832 413.184-413.184 0-190.976-129.024-351.232-304.64-398.848z"
                    fill="#515151"
                    p-id="12851"
                  ></path>
                </svg>
              </div>
            </div>
            <button
              data-collapse-toggle="navbar-search"
              type="button"
              class="inline-flex items-center p-2 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
              aria-controls="navbar-search"
              aria-expanded="false"
            >
              <span class="sr-only">Open main menu</span>
              <svg
                class="w-5 h-5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 17 14"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M1 1h15M1 7h15M1 13h15"
                />
              </svg>
            </button>
          </div>
        </div>
        <div
          class="items-center hidden w-full md:w-auto md:order-1"
          id="navbar-search"
        >
          <ul
            class="flex flex-col p-3 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
          >
            <li>
              <a
                @click="$router.push('/')"
                :class="[currPath == '/' ? 'selectnavmenu' : 'navmenu']"
                class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                aria-current="page"
              >
                <i class="iconfont icon-home_24"></i>
                首页
              </a>
            </li>
            <li>
              <a
                @click="$router.push('/category')"
                :class="[currPath == '/category' ? 'selectnavmenu' : 'navmenu']"
                class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                <i class="iconfont icon-folder_24"></i>
                分类
              </a>
            </li>
            <li>
              <a
                @click="$router.push('/tag')"
                :class="[currPath == '/tag' ? 'selectnavmenu' : 'navmenu']"
                class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                <i class="iconfont icon-mark_24"></i>
                标签
              </a>
            </li>

            <li>
              <a
                @click="$router.push('/archive')"
                :class="[currPath == '/archive' ? 'selectnavmenu' : 'navmenu']"
                class="block py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
              >
                <i class="iconfont icon-files_24"></i>
                归档
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
import SearchModer from "@/pages/frontend/SearchModer.vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { showModel, showMessage } from "@/composables/util";
import { onMounted } from "vue";
import { initDropdowns, initCollapses } from "flowbite";

const store = useStore();
const route = useRoute();

const isDark = ref(store.state.isDark);
// initialize components based on data attribute selectors
onMounted(() => {
  initCollapses();
  initDropdowns();

});

const toggleDark = () => {
  const html = document.querySelector("html");
  if (html) {
    isDark.value = !isDark.value;
    store.state.isDark = isDark.value;
    if (isDark.value) {
      html.classList.remove("light");
      html.classList.add("dark");
      document.body.style.background = "#374151"; // 修改body的背景色为color1
      document.body.style.color = "white"; // 修改body的字体颜色为color1
      //往localstorage中写入数据
      //   localStorage.setItem('isDask',true)
    } else {
      html.classList.remove("dark");
      html.classList.add("light");
      document.body.style.background =
        "linear-gradient(to right, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)"; // 修改body的背景色为渐变色
      document.body.style.color = "black"; // 修改body的字体颜色为color1
    }
  }
};

const currPath = ref(route.path);
</script>

<style scoped>
.navbg {
  background-image: var(--el-bg-nav);
  opacity: 0.95;
}
.logo-img {
  height: 40px;
}

/* .logo-container {
  display: flex;
    align-items: center;
} */

.logo-container > a {
  height: 28px;
  width: 128px;
}

.selectnavmenu {
  color: #36a3f7;
  font-weight: 800;
}

.navmenu {
  font-weight: 800;
}

/* .icon {
  vertical-align: -2px;
} */
.navmenu:hover {
  color: #10b4e6;
}

.title {
  font-size: 1.6rem;
  font-weight: 800;
}

.title-li:hover {
  border-bottom: 1px solid #fff !important;
}

/* body {
    @apply bg-light-50;
} */

.bg-gray-hover:hover {
  border-bottom: 1px solid #fff !important;
  background-color: #f4f4f5 !important;
}
</style>
